<template>
  <div>
    <h2>自动下线</h2>
    <div class="app-container1">
      <h1>关键数据</h1>
      <el-table
        vv-loading="loading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
      >
        <!-- <el-table-column label="产线速度(m/s)" align="center" prop="zdxxSpeed" /> -->
        <el-table-column label="质检数量1(个)" align="center" prop="zjNum1" />
        <el-table-column label="质检数量2(个)" align="center" prop="zjNum2" />
        <el-table-column label="合格率" align="center" prop="yield" />
        <el-table-column label="运行状态" align="center" prop="state" />
      </el-table>
    </div>
    <div>
      <el-date-picker
        clearable
        v-model="zdxxTime"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择测试时间"
        style="margin-left: 30px"
      >
      </el-date-picker>
      <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        @click="handleQuery"
        style="margin-left: 20px"
        >搜索
      </el-button>
    </div>
    <div>
      <!-- <div class="proCharts" ref="echarts" style="height: 300px"></div> -->
      <div class="proCharts" ref="echart" style="height: 300px"></div>
      <div class="proCharts" ref="minDownA" style="height: 300px"></div>
      <div class="proCharts" ref="minDownB" style="height: 300px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  zdxxgetData,
  zdxxspeed,
  zdxxNum,
  minDown,
  minDownB,
} from "@/api/system/zdsx.js";
export default {
  data() {
    return {
      zdxxTime: "",
      loading: false,
      tableData: [
        {
          zjNum1: null,
          zjNum2: null,
          yield: null,
          zdxxSpeed: null,
          state: null,
        },
      ],
    };
  },
  mounted() {
    this.getTypeList();
    // this.getOil();
    this.get();
    this.getminDown();
    this.getminDownB();
  },
  methods: {
    getTypeList() {
      this.loading = true;
      zdxxgetData().then((response) => {
        this.tableData = response.data;
        this.loading = false;
      });
      console.log(this.queryParams);
    },
    //速度
    // getOil() {
    //   this.loading = true;
    //   zdxxspeed(this.zdxxTime).then((res) => {
    //     const option = {
    //       xAxis: {
    //         data: res.data[1],
    //       },
    //       yAxis: {
    //         type: "value",
    //       },
    //       legend: {
    //         data: ["速度(m/s)"],
    //       },
    //       tooltip: {
    //         trigger: "axis",
    //         axisPointer: {
    //           type: "cross",
    //           label: {
    //             backgroundColor: "#6a7985",
    //           },
    //         },
    //       },
    //       series: [
    //         {
    //           name: "速度(m/s)",
    //           data: res.data[0],
    //           type: "line",
    //         },
    //       ],
    //     };
    //     const E = echarts.init(this.$refs.echarts);
    //     E.setOption(option);
    //   });
    // },
    get() {
      this.loading = true;
      zdxxNum(this.zdxxTime).then((res) => {
        console.log("yyds", res.data);
        const option = {
          xAxis: {
            data: res.data[0][1],
            name: "时间",
          },
          yAxis: {
            type: "value",
            name: "数量",
          },

          legend: {
            // data: ["质检一数量(个)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "质检1 数量(个)",
              data: res.data[0][0],
              type: "line",
              markPoint: {
                data: [
                  {
                    type: "max",
                  },
                  {
                    type: "min",
                  },
                ],
              },
              markLine: {
                data: [{ type: "average" }],
              },
            },
            {
              name: "质检2 数量(个)",
              data: res.data[1][0],
              type: "line",
              color: ["#46A3FF"],
              markPoint: {
                data: [
                  {
                    type: "max",
                  },
                  {
                    type: "min",
                  },
                ],
              },
              markLine: {
                data: [{ type: "average" }],
              },
            },
          ],
        };
        const E = echarts.init(this.$refs.echart);
        E.setOption(option);
      });
    },
    //minDownA
    getminDown() {
      minDown(this.zdxxTime).then((res) => {
        console.log(res.data);
        const e = echarts.init(this.$refs.minDownA);
        const option = {
          xAxis: {
            name: "时间",
            type: "category",
            data: res.data[1],
          },
          yAxis: {
            type: "value",
            name: "质检1每三分钟生产数量（个）",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {},
          series: [
            {
              type: "line",
              name: "质检1每三分钟生产数量（个） ",
              data: res.data[0],
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        e.setOption(option);
      });
    },
    getminDownB() {
      minDownB(this.zdxxTime).then((res) => {
        console.log(res.data);
        const e = echarts.init(this.$refs.minDownB);
        const option = {
          xAxis: {
            name: "时间",
            type: "category",
            data: res.data[1],
          },
          yAxis: {
            type: "value",
            name: "数量",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: { data: ["质检2每三分钟生产数量（个）"] },
          series: [
            {
              type: "line",
              name: "质检2每三分钟生产数量（个）",
              data: res.data[0],
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        e.setOption(option);
      });
    },
    handleQuery() {
      this.getTypeList();
      // this.getOil();
      this.get();
      // console.log(1111111);
      this.getminDown();
      this.getminDownB();
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 35px;
  text-align: center;
  color: #0072c6;
}
.app-container1 {
  margin-left: 30px;
  margin-right: 30px;
}
</style>
